{{define "dashboards"}}
{{template "header" .}}

<div class="container">
  <h2>Dashboards</h2>
  <form>
    <fieldset>
      <legend>New dashboard</legend>
      <label>Name</label>
      <input type="text" class="input-xlarge" id="new-dashboard-name"></input>
      <div>
        <button type="submit" class="btn" onclick="newDashboard(); return false;">Create</button>
      </div>
    </fieldset>
  </form>

  <h3>List</h3>
  <table id="dashboards-table" class="table table-striped table-hover table-condensed">
    <thead>
      <tr>
        <th>Dashboard</th>
        <th>Presets</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="dashboards-tbody"></tbody>
  </table>
</div>

<script src="/static/api.js"></script>
<script>
function newDashboard() {
  var d = document.getElementById('new-dashboard-name').value;

  $.ajax({
    url: "/api/dashboard/new",
    data: {'dashboard': d},
  	dataType: 'json',
  	success: function(d) {
      setTimeout(refreshDashboardTable, 100);
    },
    error: function(d) {
      console.log(d);
      alert(d.responseText);
    }
  });
}

function presetUrl(dash, params) {
  var p = '';
  for (var k in params) {
    p += '&$' + k + '=' + params[k];
  }
  return '/static/dash.html#' + dash + p;
}

function makePresetsLinks(dash, presets) {
  var links = [];
  for (var name in presets) {
    links.push({
      name: name,
      path: presetUrl(dash, presets[name]),
    });
  }
  if (links.length == 0) {
    links.push({
      name: '(default)',
      path: presetUrl(dash, {}),
    });
  }
  return links;
}

function refreshTable(d) {
  var tb = document.createElement('tbody');
  tb.id='dashboards-tbody';
  for (var i = 0; i < d.Dashboards.length; ++i) {
    var ns = d.Dashboards[i];
    console.log(ns);
    var tr = document.createElement('tr');

    var td = document.createElement('td');
    var name = document.createElement('h5');
    name.textContent = ns.Name
    var description = document.createElement('p');
    description.textContent = ns.Description;
    td.appendChild(name);
    td.appendChild(description);
    tr.appendChild(td);

    var td = document.createElement('td');
    var presets = document.createElement('ul');
    var links = makePresetsLinks(ns.Name, ns.Presets);
    for (var l in links) {
      var li = document.createElement('li');
      var a = document.createElement('a');
      a.href = links[l].path;
      a.textContent = links[l].name;
      li.appendChild(a);
      presets.appendChild(li);
    }
    td.appendChild(presets);
    tr.appendChild(td);

    var td = document.createElement('td');
    var edit = document.createElement('a');
    edit.href="/dashboard/edit?dashboard=" + ns.Name;
    edit.textContent = 'Edit';
    td.appendChild(edit);
    tr.appendChild(td);

    tb.appendChild(tr);
  }
  var table = document.getElementById('dashboards-table');
  table.replaceChild(
    tb,
    document.getElementById('dashboards-tbody'));
}

function refreshDashboardTable() {
  $.ajax({
    url: "/api/dashboard/list",
  	dataType: 'json',
  	success: function(d) {
      console.log(d);
      refreshTable(d);
    },
    error: function(d) {
      console.log(d);
      alert(d.responseText);
    }
  });
}

refreshDashboardTable();
</script>
{{template "footer"}}
{{end}}
